<template>
  <el-dialog
    v-model="dialogVisible"
    title="提现详情"
    width="80%"
    :before-close="handleClose"
  >
    <!-- 提现基本信息 -->
    <div class="info-section">
      <h3 class="section-title">提现信息</h3>
      <div class="info-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">提现标题：</span>
              <span class="value">{{ withdrawInfo.title }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">提现金额：</span>
              <span class="value text-success">￥{{ withdrawInfo.amount }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">申请时间：</span>
              <span class="value">{{ withdrawInfo.applyTime }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt15">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">审核状态：</span>
              <el-tag :type="getAuditStatusType(withdrawInfo.auditStatus)">
                {{ getAuditStatusText(withdrawInfo.auditStatus) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">打款状态：</span>
              <el-tag :type="getPaymentStatusType(withdrawInfo.paymentStatus)">
                {{ getPaymentStatusText(withdrawInfo.paymentStatus) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">审核时间：</span>
              <span class="value">{{ withdrawInfo.auditTime || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt15">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">银行名称：</span>
              <span class="value">{{ withdrawInfo.bankAccount }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">银行账号：</span>
              <span class="value">{{ withdrawInfo.bankName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">账户持有人：</span>
              <span class="value">{{ withdrawInfo.accountHolder }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt15" v-if="withdrawInfo.auditRemark">
          <el-col :span="24">
            <div class="info-item">
              <span class="label">审核备注：</span>
              <span class="value">{{ withdrawInfo.auditRemark }}</span>
            </div>
          </el-col>
        </el-row>
        
        <!-- 已打款状态显示打款凭证和备注 -->
        <el-row :gutter="20" class="mt15" v-if="withdrawInfo.paymentStatus === '1'">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">打款凭证：</span>
              <div class="value">
                <el-image
                  v-if="withdrawInfo.paymentVoucher"
                  :src="withdrawInfo.paymentVoucher"
                  :preview-src-list="[withdrawInfo.paymentVoucher]"
                  fit="cover"
                  style="width: 100px; height: 80px; border-radius: 4px; border: 1px solid #e4e7ed;"
                  preview-teleported
                />
                <span v-else>暂无凭证</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">打款备注：</span>
              <span class="value">{{ withdrawInfo.paymentRemark || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="mt15" v-if="withdrawInfo.paymentStatus === '1' && withdrawInfo.paymentTime">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">打款时间：</span>
              <span class="value">{{ withdrawInfo.paymentTime }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 关联账单列表 -->
    <div class="bill-section">
      <h3 class="section-title">关联账单</h3>
      <div class="bill-content">
        <el-table 
          :data="billList" 
          v-loading="billLoading" 
          border
          max-height="400"
        >
          <el-table-column label="费用名称" prop="name" min-width="120" />
          <el-table-column label="账单类型" prop="belong" min-width="100">
            <template #default="{ row }">
              {{ getBillBelongText(row.belong) }}
            </template>
          </el-table-column>
          <el-table-column label="租客姓名" prop="renterName" min-width="100" />
          <el-table-column label="联系方式" prop="contacts" min-width="120" />
          <el-table-column label="账单周期" min-width="200">
            <template #default="{ row }">
              {{ row.billCycleBegin }} 至 {{ row.billCycleEnd }}
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="money" min-width="120">
            <template #default="{ row }">
              <span :class="row.inoutFlag === '1' ? 'text-success' : 'text-danger'">
                {{ row.inoutFlag === "1" ? "+" : "-" }}{{ row.money?.toFixed(2) }}元
              </span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" min-width="160" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-show="billTotal > 0"
            v-model:current-page="billQueryParams.pageNum"
            v-model:page-size="billQueryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="billTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="val => { billQueryParams.pageSize = val; loadAssociateBills() }"
            @current-change="val => { billQueryParams.pageNum = val; loadAssociateBills() }"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="WithdrawDetailDl">
import { ref, reactive, toRefs, watch, getCurrentInstance } from 'vue'
import { getAssociateBills as fetchAssociateBills } from '@/api/payment/withdraw'

const { proxy } = getCurrentInstance()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  withdrawInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible'])

const dialogVisible = ref(false)
const billLoading = ref(false)
const billTotal = ref(0)
const billList = ref([])

const data = reactive({
  billQueryParams: {
    pageNum: 1,
    pageSize: 10
  }
})

const { billQueryParams } = toRefs(data)

// 监听visible变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    // 重置分页
    billQueryParams.value.pageNum = 1
    // 获取关联账单
    loadAssociateBills()
  }
})

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
  emit('update:visible', val)
})

// 获取关联账单
function loadAssociateBills() {
  if (!props.withdrawInfo.withdrawId) return
  
  billLoading.value = true
  fetchAssociateBills(props.withdrawInfo.withdrawId, billQueryParams.value).then(res => {
    if (res.code === 200) {
      billList.value = res.rows || []
      billTotal.value = res.total || 0
    }
  }).catch(err => {
    console.error('获取关联账单失败', err)
    billList.value = []
    billTotal.value = 0
  }).finally(() => {
    billLoading.value = false
  })
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
}

// 获取审核状态类型
function getAuditStatusType(status) {
  const statusMap = {
    '0': 'warning',
    '1': 'success',
    '2': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取审核状态文本
function getAuditStatusText(status) {
  const statusMap = {
    '0': '待审核',
    '1': '审核通过',
    '2': '审核拒绝'
  }
  return statusMap[status] || '--'
}

// 获取打款状态类型
function getPaymentStatusType(status) {
  const statusMap = {
    '0': 'warning',
    '1': 'success',
    '2': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取打款状态文本
function getPaymentStatusText(status) {
  const statusMap = {
    '0': '待打款',
    '1': '已打款',
    '2': '打款失败'
  }
  return statusMap[status] || '--'
}

// 获取账单类型文本
function getBillBelongText(belong) {
  const belongMap = {
    '1': '租金',
    '2': '水费',
    '3': '电费',
    '4': '燃气费',
    '5': '网费',
    '6': '其他费用'
  }
  return belongMap[belong] || '--'
}

// 获取支付方式文本
function getPayPlatFormText(payPlatForm) {
  const payPlatFormMap = {
    '1': '微信支付',
    '2': '支付宝',
    '3': '银行卡',
    '4': '现金',
    '5': '其他'
  }
  return payPlatFormMap[payPlatForm] || '--'
}
</script>

<style lang="scss" scoped>
.info-section {
  margin-bottom: 30px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
  }
  
  .info-content {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
  }
}

.bill-section {
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
  }
  
  .bill-content {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    overflow: hidden;
  }
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  
  .label {
    color: #606266;
    font-weight: 500;
    min-width: 80px;
    flex-shrink: 0;
  }
  
  .value {
    color: #303133;
    margin-left: 8px;
    flex: 1;
  }
}

.text-success {
  color: var(--el-color-success);
  font-weight: 600;
}

.text-danger {
  color: var(--el-color-danger);
}

.mt15 {
  margin-top: 15px;
}

.pagination-container {
  margin-top: 20px;
  padding: 15px;
  text-align: center;
  background-color: #fafafa;
  border-top: 1px solid #e4e7ed;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}
</style> 